<template>
  <Wmodule class="module10" title="魏营镇概况">
    <div class="module10-m">
      <div class="module10-m-head">
        <div class="module10-m-head-icon">
          <img :src="imgUrl46" alt="" class="icon" />
        </div>
        <div class="module10-m-head-title">基本情况</div>
      </div>
      <div class="module10-m-c">
        <div class="m-l-r m-l-r0">
          <div class="m-l-r-wa">
            <div class="m-l-r-wa-value">
              {{ data.townPopulation }}
              <div class="unit">人</div>
            </div>
            <div class="m-l-r-wa-title">户籍人口</div>
          </div>
        </div>
        <div class="m-l-r m-l-r1">
          <div class="m-l-r-wa">
            <div class="m-l-r-wa-value">
              {{ data.jwhcount }}
              <div class="unit">个</div>
            </div>
            <div class="m-l-r-wa-title">辖居委会</div>
          </div>
        </div>
        <div class="m-l-r m-l-r1">
          <div class="m-l-r-wa">
            <div class="m-l-r-wa-value">
              {{ data.villagecount }}
              <div class="unit">个</div>
            </div>
            <div class="m-l-r-wa-title">行政村</div>
          </div>
        </div>
      </div>
    </div>
    <div class="module10-m">
      <div class="module10-m-head">
        <div class="module10-m-head-icon">
          <img :src="imgUrl46" alt="" class="icon" />
        </div>
        <div class="module10-m-head-title">镇域面积占比</div>
      </div>
      <div class="module10-m-c">
        <div class="pie1" ref="chartDom"></div>
      </div>
    </div>
  </Wmodule>
</template>
<script setup>
import { onMounted, watch, ref, toRaw } from 'vue'
import * as echarts from 'echarts'

import Wmodule from '@/components/wmodule/index.vue'

import imgUrl46 from '@/assets/img/46.png'

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        townPopulation: 0,
        jwhcount: 0,
        villagecount: 0,
        farmLand: 0,
        watersArea: 0,
        otherArea: 0
      }
    }
  }
})

const chartDom = ref(null)

let myChart

const echartsInit = () => {
  myChart = echarts.init(chartDom.value)
}

const echartsetOption = (param = 0, param1 = [], param2 = []) => {
  let option = {
    title: {
      text: param,
      subtext: '镇域面积\n（公顷）',
      textStyle: {
        color: '#fff',
        fontSize: 38,
        fontWeight: 700,
        align: 'center'
      },
      subtextStyle: {
        color: 'rgba(2, 242, 190, 1)',
        fontSize: 14,
        fontWeight: 500,
        align: 'center'
      },
      top: '38%',
      left: '48%',
      textAlign: 'center',
      textVerticalAlign: 'center',
      itemGap: 0
    },
    legend: {
      bottom: '20%',
      left: 'center',
      icon: 'circle',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 500
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'outside',
          formatter: '{b}:{d}公顷',
          alignTo: 'edge'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            color: '#fff'
          },
          labelLine: {
            show: true
          }
        },
        labelLine: {
          show: false
        },
        data: param1
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '45%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 20
          }
        },
        labelLine: {
          show: false
        },
        data: param2
      }
    ]
  }
  if (myChart) {
    myChart.clear()
    myChart.setOption(option)
  }
}

onMounted(() => {
  echartsInit()
})

watch(
  () => props.data,
  (newValue) => {
    const _newValue = toRaw(newValue)
    console.log('-_newValue--', _newValue)
    const _total =
      _newValue.farmLand + _newValue.watersArea + _newValue.otherArea
    let _series0 = [
      {
        value: _newValue.farmLand,
        name: '耕地面积',
        itemStyle: {
          color: 'rgba(12, 195, 249, 1)'
        }
      },
      {
        value: _newValue.watersArea,
        name: '水域面积',
        itemStyle: {
          color: 'rgba(243, 184, 37, 1)'
        }
      },
      {
        value: _newValue.otherArea,
        name: '其他',
        itemStyle: {
          color: 'rgba(5, 179, 164, 1)'
        }
      }
    ]
    let _series1 = [
      {
        value: _newValue.farmLand,
        name: '耕地面积',
        itemStyle: {
          color: 'rgba(12, 195, 249, 0.8)'
        }
      },
      {
        value: _newValue.watersArea,
        name: '水域面积',
        itemStyle: {
          color: 'rgba(243, 184, 37, 0.8)'
        }
      },
      {
        value: _newValue.otherArea,
        name: '其他',
        itemStyle: {
          color: 'rgba(5, 179, 164, 0.8)'
        }
      }
    ]
    myChart && echartsetOption(_total, _series0, _series1)
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.module10 {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  :deep(.module1-content) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .module10-m {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: 100%;
    flex-direction: column;
    .module10-m-head {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 2px;
      .module10-m-head-icon {
        display: flex;
        justify-content: center;
        align-content: center;
        .icon {
          width: 11px;
          height: 13px;
          display: block;
        }
      }
      .module10-m-head-title {
        /** 文本1 */
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 28.6px;
        color: rgba(255, 255, 255, 1);
      }
    }
    .module10-m-c {
      flex: 1;
      width: 100%;
      margin-top: 34px;
      & > .m-l-r:not(:last-child) {
        margin-bottom: 30px;
      }
    }
  }
  .m-l-r {
    width: 274px;
    height: 74px;
    position: relative;
    &.m-l-r0 {
      background: url('@/assets/img/47.png') no-repeat center;
      background-size: 100% 100%;
    }
    &.m-l-r1 {
      background: url('@/assets/img/48.png') no-repeat center;
      background-size: 100% 100%;
    }
    .m-l-r-wa {
      position: absolute;
      left: 40%;
      .m-l-r-wa-value {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 32.93px;
        color: rgba(255, 255, 255, 1);
        .unit {
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 32.93px;
          color: rgba(255, 255, 255, 1);
        }
      }
      .m-l-r-wa-title {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 19.21px;
        color: rgba(2, 242, 190, 1);
      }
    }
  }
  .pie1 {
    width: 100%;
    height: 100%;
  }
}
</style>
